<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
</head>
<body>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox-content" style="padding-right: 20%;padding-left: 20%;">
            <form class="form-horizontal m-t" id="commentForm" autocomplete="off">
                <input type="hidden" th:value="${user.userId}" name="userId">
                <div class="form-group">
                    <label class="col-sm-3 control-label">姓氏：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="realname" th:value="${user.realname}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">角色：</label>
                    <div class="col-sm-8">
                        <select name="roleId" id="roleId" class="form-control">
                            <option value="">请选择</option>
                            <option th:each="role:${roleList}" th:value="${role.roleId}" th:text="${role.roleName}" th:selected="${roleId eq role.roleId}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">邮箱：</label>
                    <div class="col-sm-8">
                        <input type="email" class="form-control" name="emailAddress" th:value="${user.emailAddress}" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">PIN：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="pin" th:value="${user.pin}" >
                    </div>
                </div>
                <div class="form-group form-button" style="display: none">
                    <div class="col-sm-8 col-sm-offset-5">
                        <button class="btn btn-success" type="submit">提交</button>
                        <button class="btn btn-default cancel" type="button" >取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.js}"></script>
<script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script th:inline="javascript">
    $(function(){
        // validate signup form on keyup and submit
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#commentForm").validate({
            rules: {
                realname: "required",
                password: {
                    required: true,
                    minlength: 5
                },
                emailAddress: {
                    required: true,
                    email: true
                },
                pin: {
                    required: true
                }
            },
            messages: {
                realname: icon + "请输入你的姓",
                password: {
                    required: icon + "请输入您的密码",
                    minlength: icon + "密码必须5个字符以上"
                },
                emailAddress: icon + "请输入您的E-mail",
                pin: {
                    required: icon + "请输入您的pin码"
                }
            },
            submitHandler:function(form) {
                var data = $("#commentForm").serialize();
                $.ajax({
                    type:'post',
                    url:[[${ctx}]]+"/user/update.do",
                    cache: false,
                    data:data,
                    dataType:'json',
                    success:function(data){
                        if(data.result){
                            parent.layer.msg('操作成功',{icon: 1});

                        }else{
                            parent.layer.msg('操作失败', {icon: 2});
                        }
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    }
                })
            }
        });
    });

    /**
     * 取消按钮
     */
    $(".cancel").click(function () {
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });


    /**
     * 控制页面展示方式
     * @param type
     */
    function shoWay(type) {
        if(type=='view'){
            $("form input").prop("readonly", true);
            $("form select").prop("disabled", true);
        }else{
            $('.form-button').show();
        }
    }
</script>
</body>
</html>